<template>
  <div class="JNPF-common-layout">
    <div class="JNPF-common-layout-center">
      <div class="JNPF-common-layout-main JNPF-flex-main">
        <div class="JNPF-common-head">
          <topOpts isJudgePer @add="addEditTemplate()"></topOpts>
          <div class="JNPF-common-head-right">
            <el-tooltip effect="dark" :content="$t('common.refresh')" placement="top">
              <el-link icon="icon-ym icon-ym-Refresh JNPF-common-head-icon" :underline="false"
                @click="initData()" />
            </el-tooltip>
          </div>
        </div>
        <JNPF-table v-loading="listLoading" :data="list">
          <el-table-column prop="levelCode" label="级别" show-overflow-tooltip min-width="120" />
          <el-table-column prop="levelName" label="会员等级" show-overflow-tooltip min-width="160" />
          <el-table-column prop="enabledMark" label="等级状态" min-width="120">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.enabledMark == 1" type="success">正常</el-tag>
              <el-tag v-if="scope.row.enabledMark == 0" type="danger">禁用</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="amount" label="会费金额" show-overflow-tooltip min-width="160">
            <template slot-scope="scope">
              <span>{{ retainNumber(scope.row.amount) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="vipPeriod" label="会员期限" show-overflow-tooltip min-width="160" />
          <el-table-column prop="lastModifyUserId" label="修改人" show-overflow-tooltip min-width="160" />
          <el-table-column prop="lastModifyTime" label="修改时间" show-overflow-tooltip :formatter="jnpf.tableDateFormat" min-width="160" />
          <el-table-column label="操作" width="150" fixed="right">
            <template slot-scope="scope">
              <tableOpts isJudgePer @edit="addEditTemplate(scope.row.id)" :hasDel="false" />
            </template>
          </el-table-column>
        </JNPF-table>
        <pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize" @pagination="initData" />
        <Form v-if="formVisible" ref="Form" @close="closeForm" />
      </div>
    </div>
  </div>
</template>
<script>
import { vipLevelList } from '@/api/asso/vip/vipLevel'
import Form from './Form'
export default {
  name: 'asso-vip-vipLevel',
  components: { Form },
  data() {
    return {
      list: [],
      total: 0,
      listLoading: true,
      listQuery: {
        currentPage: 1,
        pageSize: 20,
      },
      formVisible: false
    }
  },
  created() {
    this.initData()
  },
  methods: {
    initData() {
      this.listLoading = true
      vipLevelList(this.listQuery).then(res => {
        this.list = res.data.list
        this.total = res.data.pagination.total
        this.listLoading = false
      }).catch(() => {
        this.listLoading = false
      })
    },
    /**
     * 新增/修改 打开弹窗
     * @param {*} id  编辑id
     */
    addEditTemplate(id) {
      this.formVisible = true
      this.$nextTick(() => {
        this.$refs.Form.init(id)
      })
    },
    closeForm(isRefresh) {
      this.formVisible = false
      if (isRefresh) this.initData()
    },
    // 保留两位小数
    retainNumber(val){
      return Number(val).toFixed(2)
    }
  }
}
</script>